<template>
	<view class="action-goods">
		<!-- 返回按钮 -->
		<!-- <u-back-top :scroll-top="scrollTop" top="10" :duration="240" :iconStyle="iconStyle" :customStyle="custom">
		</u-back-top> -->
		<view class="goods-content-top">
			<view class="box_13">
				<!-- 左侧返回按钮 -->
				<image class="button" src="/static/images/common/back_two.png" mode="widthFix" @tap="back"></image>
			</view>
			<view class="swiper">
				<!-- <u-swiper class="swiper-item" :list="list" autoplay indicator indicatorMode="dot" :interval="4000"
					indicatorActiveColor="#1D378B" height="42vh" imgMode="widthFix">
				</u-swiper> -->
				<u-back-top :scroll-top="scrollTop" top="10" :duration="240" :iconStyle="iconStyle"
					:customStyle="custom">
				</u-back-top>
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
					<view id="demo1" class="scroll-view-item_H">
						<image class="goodsbg-item" src="../../../../static/images/goods/goodsbg.png"></image>
					</view>
					<view id="demo2" class="scroll-view-item_H">
						<image class="goodsbg-item" src="../../../../static/images/goods/goodsbg.png"></image>
					</view>
					<view id="demo3" class="scroll-view-item_H">
						<image class="goodsbg-item" src="../../../../static/images/goods/goodsbg.png"></image>
					</view>
				</scroll-view>
			</view>
			<view class="box_13">
				<!-- 左侧返回按钮 -->
				<image class="button" src="/static/images/common/back_two.png" mode="widthFix" @tap="back"></image>
			</view>
			<view class="incroduce-item">
				<view class="name">{{goodsName}}</view>
				<view class="number">{{goodsPice}}</view>
				<view class="incroduction">{{goodsIndroduce}}</view>
			</view>
			<!-- <view class="title">{{ detail.title }}</view>
			<view class="price">￥{{ detail.price }}</view>
			<view class="tips">
				<view class="tip">提示:</view>
				<view class="tip" v-if="goodsType === 1">购买此商品可获得抢购分{{ detail.integral }}和消费积分{{ detail.code }}</view>
				<view class="tip" v-if="goodsType === 2">购买此商品可获得绿色积分{{ detail.integral }}</view>
			</view> -->
		</view>
		<u-gap height="150" bgColor="#fafafa"></u-gap>
		<view class="goods-content-mid">
			<view class="top">
				<view class="tips-title">商品颜色</view>
				<view class="color-group">
					<block v-for="(res, index) in colorGroupList" :key="index">
						<view class="color-button" @click="navigateToMall(index)" :class="">
							<view class="button-text">{{ res.title }}</view>
						</view>
					</block>
				</view>
			</view>
			<view class="bottom">
				<view class="tips-title">尺码</view>
				<view class="size-group">
					<block v-for="(res, index) in sizeGroupList" :key="index">
						<view class="size-button" @click="navigateToMall(index)">
							<view class="button-text">{{ res.title }}</view>
						</view>
					</block>
				</view>
			</view>
			<view class="count-number">
				<view class="tips-title">数量</view>
				<view class="count-item">
					<view class="button_item" @click="red()">
						<image class="icon_item" src="../../../../static/images/goods/reduce.png">
					</view>
					<view class="number_item">{{number}}</view>
					<view class="button_item" @click="add()">
						<image class="add_item" src="../../../../static/images/goods/add.png">
					</view>
				</view>
			</view>
		</view>
		<view class="button-background">
			<view :class="`button ${isSuccess ? 'success' : ''}`" @click="addOrder">立即购买</view><!-- touchOffDebounce -->
		</view>
		<!-- 弹窗 -->
		<view class="mask" v-if="showTips" @touchmove.stop.prevent>
			<u-transition :show="showTips">
				<view class="modal-bg-box">
					<view class="title">提示</view>
					<view class="inner-box">
						<view class="text-tips" :selectable="false">{{ maskTips }}</view>
						<view class="button-box">
							<view class="button-one" @click="cancel" v-if="button_one != ''">{{ button_one }}</view>
							<view class="button-two" @click="dailogConfirm">{{ button_two }}</view>
						</view>
					</view>
				</view>
			</u-transition>
		</view>
		<!-- 购买商品弹出层 -->
		<u-popup :show="show" :round="10" :closeable="true" @close="close">
			<view class="auto-background">
				<view class="auto-title">支付订单</view>
				<view class="goods-content">
					<view class="number_content">￥688.00</view>
					<view class="after-content">支付剩余时间 14:59</view>
				</view>
				<view class="add-content-input-two">
					<view>
						<image class="icon-item" src="../../../../static/images/goods/money.png"></image>
					</view>
					<view class="input-title">余额支付</view>
					<view class="input-content">
						<input class="input-style-two" type="number" placeholder-class="input-placeholder"
							placeholder="可用余额￥100.00" :focus="numberFocus" @blur="numberLostFocus"></input>
					</view>
					<!-- <view class="input-title-two">购买数量最少1个</view> -->
				</view>
				<view class="tips-content">
					<view class="tips">余额不足，请先去钱包充值。</view>
				</view>
				<view class="confirm-button" @click="confirm">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import Fn from '@/common/public.js';
	import {
		goodsDetail,
		createOrder
	} from '@/common/api.js';
	export default {
		
		data() {
			return {
				/* 返回顶部按钮 */
				scrollTop: 0, // 返回顶部滚动值
				iconStyle: {
					fontSize: '40rpx',
					fontWeight: '600',
					color: '#FFFFFF'
				}, // 滚动内层样式
				custom: {
					background: '#CB8F58'
				}, // 滚动外层样式

				/* 商品详情 */
				list: [], // 商品轮播图
				detail: {}, // 商品详情
				goodsType: '', // 商品类型
				goodsName:'百搭帆布鞋',
				goodsPice:'￥688.00',
				goodsIndroduce:'购买规则介绍：购买规则介绍购买规则介绍购买规则介绍购买规则介绍购买规则介绍购买规则介绍购买规则介绍购买规则介绍购买规则介绍购买规则介绍购买规则介绍购买规则介绍。',
				colorGroupList: [{
						title: "黑"
					},
					{
						title: "白"
					},
					{
						title: "灰"
					},
					{
						title: "红"
					}
				],

				sizeGroupList: [{
						title: "34"
					},
					{
						title: "35"
					},
					{
						title: "36"
					},
					{
						title: "37"
					},
					{
						title: "38"
					},
					{
						title: "39"
					},
					{
						title: "40"
					},
					{
						title: "41"
					},
					{
						title: "42"
					},
					{
						title: "43"
					}
				],

				/* 弹窗 */
				maskTips: '', // 弹窗提示
				showTips: false, // 弹窗状态
				button_one: '', // 取消按钮
				button_two: '确定', // 确定按钮
				control: 0, // 确定按钮状态
				isSuccess: false, // 禁止点击

				/* 弹出购买窗口 */
				show: false, // 是否显示弹窗
				goods: {}, // 商品
				goodsID: '', // 下单商品编号
				number: '1', // 数量
				numberFocus: false, // 数量状态
			};
		},
		onLoad(option) {
			/* 获取商品ID */
			this.goodsID = option.id;
			this.goodsType = parseInt(option.type); // 商品类型 1 - 送抢购分 2 - 送绿色积分
			this.getGoodsDetail(); // 获取商品详情信息

		},
		onShow() {

		},
		/* 返回顶部 */
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			/* 减少 */
			red(index) {
				if (this.number>= 1) {
					this.number--;
				}
			},
			/* 增加 */
			add(index) {
				this.number++;
			},

			/* 获取商品详情信息 */
			getGoodsDetail() {
				const that = this;
				const params = {
					id: that.goodsID
				};
				goodsDetail(params).then((res) => {
					const result = res.data;
					console.log(result);
					that.list.push(result.goodsLogo);
					that.detail = {
						id: result.catId,
						number: result.goodsNum,
						title: result.goodsName,
						price: Fn.checkDigit({
							number: result.goodsPrice,
							len: 2,
							max: 100000000,
							min: -1
						}),
						tips: result.onlineStatusName,
						status: result.onlineStatus,
						strings: result.goodsContent.replace(/\<img/g,
							'<img style="width:100%;height:100%;display:block;"'),
						integral: Fn.checkDigit({
							number: result.special_give,
							len: 2,
							max: 100000000,
							min: -1
						}), // 抢购分
						code: Fn.checkDigit({
							number: result.currency_give,
							len: 2,
							max: 100000000,
							min: -1
						}) // 消费积分
					};
				});
			},

			/* 商品下单 */
			addOrder() {
				const that = this;
				that.show = true;
				// that.isSuccess = true;
				// this.$debounce(this.buyGoods, 1500, true);
			},

			/* 提交增加防抖 */
			// touchOffDebounce() {
			// 	const that = this;
			// 	that.control = 2;
			// 	that.showTips = true;
			// 	that.maskTips = '是否购买一份此商品？';
			// 	that.button_two = '确定';
			// 	that.button_one = '取消';
			// 	// 第一个参数为当前需要添加防抖的函数名 ***不需要加括号
			// 	// 第二个为延时执行函数的时间
			// 	// 第三个是否立即执行
			// 	// this.$debounce(this.buyGoods, 1500, true);
			// },

			/* 下单购买商品 */
			// buyGoods() {
			// 	const that = this;
			// 	that.isSuccess = true;
			// 	that.button_two = '确定';
			// 	// if (that.detail.status == 2) {
			// 	// 	that.showTips = true;
			// 	// 	that.maskTips = '商品竞价已结束，请期待下次参与!';
			// 	// } else if (that.detail.number == 0) {
			// 	// 	that.showTips = true;
			// 	// 	that.maskTips = '商品竞价已结束，请期待下次参与!';
			// 	// } else {
			// 	const params = {
			// 		id: that.goodsID
			// 	};
			// 	Fn.Loading('购买中');
			// 	setTimeout(() => {
			// 		Fn.LoadingOff();
			// 		// 节流操作防止重复请求
			// 		uni.$u.throttle(() => {
			// 			createOrder(params).then((res) => {
			// 				if (res.status === 1) {
			// 					const result = res;
			// 					that.control = 1;
			// 					that.showTips = true;
			// 					that.maskTips = '购买成功,请前往买单页面付款';
			// 					that.button_two = '前去付款';
			// 					that.button_one = '返回商城';
			// 				} else {
			// 					that.isSuccess = false;
			// 					Fn.Toast(res.msg, 3, 1500);
			// 				};
			// 			});
			// 		}, 1500);
			// 	}, 300);
			// 	// };
			// },

			/* 确认 */
			// confirm(option) {
			// 	const that = this;
			// 	that.showTips = false;
			// 	this.isSuccess = false;
			// 	that.maskTips = '购买成功,请前往买单页面付款';
			// 	// if (option == 0) {
			// 	// 	this.showTips = false;
			// 	// } else {
			// 	// 	this.showTips = false;
			// 	// 	uni.redirectTo({
			// 	// 		url: '/pages/mine/buyOrder/buyOrder'
			// 	// 	});
			// 	// };
			// },

			/* 确认 */
			confirm() {
				const that = this;
				that.showTips = false;
				that.maskTips = '购买成功,请前往买单页面付款';
				// if (that.confirm_status === 0) {
				if (that.number == '') {
					Fn.Toast('请输入购买数量', 3, 1000);
					that.numberFocus = true;
					return;
				} else if (parseInt(that.number) === 0) {
					Fn.Toast('输入数量不能为0', 3, 1000);
					that.numberFocus = true;
					return;
				} else {
					const params = {
						id: that.goodsID,
						num: that.number
					};
					Fn.Loading('购买中');
					that.show = false;
					setTimeout(() => {
						Fn.LoadingOff();
						// 节流操作防止重复请求
						uni.$u.throttle(() => {
							createOrder(params).then((res) => {
								if (res.status === 1) {
									const result = res;
									that.control = 1;
									that.showTips = true;
									that.maskTips = '购买成功,请前往买单页面付款';
									that.button_two = '前去付款';
									that.button_one = '返回商城';
									that.number = '';
								} else {
									// that.isSuccess = false;
									Fn.Toast(res.msg, 3, 1500);
								};
							});
						}, 1500);
					}, 500);
				}
				// } else {
				// 	uni.navigateTo({
				// 		url: '/pages/mine/buyOrder/buyOrder?id=' + 1,
				// 	});
				// };
			},

			/* 弹窗确定按钮 */
			dailogConfirm() {
				const that = this;
				uni.navigateTo({
					url: '/pages/mine/buyOrder/buyOrder?id=' + 1,
				});
				that.showTips = false;
			},

			/* 取消 */
			cancel() {
				const that = this;
				if (that.control == 1) {
					uni.navigateBack({
						delta: 1
					});
				} else if (that.control == 2) {
					that.showTips = false;
				};
			},

			/* 关闭弹出窗口 */
			close() {
				const that = this;
				that.show = false;
				// that.isSuccess = false;
			},

			/* 数量失去焦点时 */
			numberLostFocus(event) {
				this.numberFocus = false;
			},

			/* 跳转至收货地址页面 */
			navigateToAddress(option) {
				uni.navigateTo({
					url: '/pages/mine/address/address?style=' + option,
				});
			},
			back(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	// page {
	// 	background-color: #fafafa;
	// }

	// uni-page-body {
	// 	background: none;
	// }

	.action-goods {
		// padding: 0 18px;
		font-family: PingFang_Medium;
		position: relative;
		.mask {
			position: fixed;
			z-index: 1001;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.5);

			.modal-bg-box {
				background-color: #FFFFFF;
				width: 580rpx;
				// height: 390rpx;
				position: absolute;
				left: 50%;
				top: 45%;
				transform: translate(-50%, -50%);

				.title {
					text-align: center;
					margin: 40rpx 0;
					font-size: 42rpx;
					// font-weight: 600;
					font-family: PingFang_Bold;
				}

				.inner-box {
					margin: 20rpx 55rpx 40rpx 55rpx;
					text-align: center;

					.text-tips {
						display: block;
						line-height: 70rpx;
						font-size: 33rpx;
						// font-family: Alibaba PuHuiTi;
						// font-weight: bold;
						font-family: PingFang_Bold;
						color: #89898C;
						word-wrap: break-word;
					}

					.button-box {
						text-align: center;
						margin-top: 40rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.button-one {
							display: inline-block;
							width: 140rpx;
							height: 58rpx;
							line-height: 58rpx;
							margin: 0 60rpx 0 0;
							text-align: center;
							color: #000000;
							border: 2px solid #000000;
							border-radius: 8rpx;
							font-size: 26rpx;
							// font-weight: bold;
							font-family: PingFang_Bold;
							// cursor: pointer;
						}

						.button-two {
							background-color: #000000;
							display: inline-block;
							width: 140rpx;
							height: 58rpx;
							line-height: 58rpx;
							// margin: 0 0 0 40rpx;
							text-align: center;
							color: #FFFFFF;
							border-radius: 8rpx;
							font-size: 26rpx;
							// font-weight: bold;
							font-family: PingFang_Bold;
							// cursor: pointer;
						}
					}
				}
			}
		}

		.goods-content-top {
			white-space: nowrap;
			width: 100%;
			height: 345px;
			position: relative;
			.box_13 {
				width: 100%;
				height: 100rpx;
				padding: 0 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				position:absolute;
				top:11%;
				left:0;
				.button {
					width: 50rpx;
					height: 50rpx;
				}
			}
			.scroll-view_H {
				width: 100%;
				position: relative;

				.scroll-view-item_H {
					display: inline-block;
					text-align: left;
					width: 100%;

					.goodsbg-item {
						width: 375px;
						height: 345px;
					}
				}
			}

			.incroduce-item {
				padding: 20px 0 23px 0;
				position: absolute;
				background: #FFFFFF;
				border-radius: 20px 20px 0px 0px;
				border: 1px solid #00000020;
				opacity: 1;
				width: 100%;
				top: 90%;

				.name {
					text-align: left;
					color: #404040;
					font-weight: bold;
					text-align: left;
					font-size: 18px;
					margin-left: 20px;
				}

				.number {
					text-align: left;
					color: #F71D1F;
					font-weight: bold;
					font-size: 20px;
					margin-left: 20px;
				}

				.incroduction {
					display: block;
					text-align: left;
					color: #404040;
					width: 80%;
					margin-left: 20px;
					font-size: 12px;
					// overflow: hidden;
					white-space: pre-line;
				}
			}

			.swiper {

				// background-color: #FFFFFF;
				.swiper-item {
					width: 100%;
					height: auto;
				}
			}

			.title {
				margin: 20rpx 0 26rpx 0;
				font-size: 36rpx;
				// font-weight: 600;
				font-family: PingFang_Bold;
			}

			.price {
				margin: 40rpx 0;
				color: #E62A21;
				font-size: 48rpx;
				// font-weight: 600;
				font-family: PingFang_Bold;
			}

			.tips {
				// margin-top: 20rpx;

				.tip {
					color: #AD4440;
					font-size: 28rpx;
					font-family: PingFang_Bold;
				}
			}
		}

		.goods-content-mid {
			margin: 30rpx 0;
			padding: 0 18px;
			align-items: center;
			justify-content: space-between;

			.top {
				display: block;
				align-items: center;

				.tips-title {
					font-size: 15px;
					font-weight: bold;
				}

				.color-group {
					display: flex;
					text-align: center;

					.button-text {
						margin-top: 10px;
						width: 49px;
						height: 24px;
						margin-left: 7px;
						background: #FAFAFD;
						border-radius: 5px 5px 5px 5px;
						opacity: 1;
						font-size: 13px;
						line-height: 25px;
					}
				}

				.tips {
					background-color: #AD4440;
					text-align: center;
					margin-left: 20rpx;
					padding: 8rpx 30rpx;
					color: #FFFFFF;
					font-size: 26rpx;
					// line-height: 50rpx;
					// text-indent: 1em;
					border-radius: 3px;
				}

				.tips-two {
					background-color: #beb2b2;
					text-align: center;
					margin-left: 40rpx;
					padding: 8rpx 30rpx;
					color: #FFFFFF;
					font-size: 30rpx;
					// line-height: 50rpx;
					// text-indent: 1em;
					border-radius: 3px;
				}
			}

			.bottom {
				display: block;
				align-items: center;
				margin-top: 10px;

				.tips-title {
					font-size: 15px;
					font-weight: bold;
				}

				.size-group {
					flex-wrap: wrap;
					display: flex;
					text-align: center;

					.button-text {
						margin-top: 10px;
						width: 49px;
						height: 24px;
						margin-left: 7px;
						background: #FAFAFD;
						border-radius: 5px 5px 5px 5px;
						opacity: 1;
						font-size: 13px;
					}
				}

				.tips {
					color: #AD4440;
					font-size: 28rpx;
					font-family: PingFang_Bold;
				}
			}

			.count-number {
				display: block;
				margin-top: 10px;

				.tips-title {
					font-size: 15px;
					font-weight: bold;
				}

				.count-item {
					display: flex;
					margin-top: 10px;
					text-align: left;

					.button_item {
						width: 20px;
						height: 20px;
						padding: 2px 0;
						text-align: center;

						.icon_item {
							width: 12px;
							height: 6px;
						}

						.add_item {
							width: 12px;
							height: 12px;
						}
					}

					.number_item {
						width: 49px;
						height: 24px;
						border-radius: 2.5px 2.5px 2.5px 2.5px;
						text-align: center;
						color: #404040;
						font-size: 12px;
						font-weight: bold;
						padding: 4px 0;
					}
				}
			}
		}

		.button-background {
			// position: fixed;
			// bottom: 24px;
			// left: 0;
			// right: 0;
			text-align: center;
			background-color: #FFFFFF;
			padding: 20px 0;

			.button {
				width: 324px;
				height: 50px;
				line-height: 50px;
				font-size: 18px;
				background: #F71D1F;
				border-radius: 10px 10px 10px 10px;
				opacity: 0.5;
				color: #FFFFFF;
				text-align: center;
				margin: auto;
				// cursor: pointer;
				font-family: PingFang_Bold;

				&.success {
					pointer-events: none;
					cursor: default;
				}
			}
		}

		.auto-background {
			padding-bottom: 40rpx;

			.auto-title {
				margin: 40rpx 0;
				text-align: center;
				font-size: 20px;
				font-weight: bold;
				font-family: PingFang_Bold;
			}

			.goods-content {
				background-color: #FFFFFF;
				margin-bottom: 40rpx;
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				text-align: center;

				.number_content {
					// margin: 30rpx 0;
					display: block;
					text-align: center;
					align-items: center;
					font-size: 35px;
					font-weight: bold;
					color: #F71D1F;
				}

				.after-content {
					display: block;
					color: #2A2A2A;
					font-size: 14px;
					margin-top: 10px;
				}
			}

			// justify-content: space-between;	

			.add-content-input-two {
				padding: 22px 10px;
				display: flex;
				align-items: center;
				border: 1px solid #00000010;
				border-radius: 20px 20px 0px 0px;

				.icon-item {
					width: 24px;
					height: 24px;
				}

				.input-placeholder {
					color: #a5a5a8;
					font-size: 27rpx;
					// font-weight: 600;
					font-family: PingFang_Bold;
				}

				.input-title {
					font-size: 16px;
					color: #2A2A2A;
					font-family: PingFang_Bold;
					margin-left: 6px;
					line-height: 20px;
				}

				.input-content {
					margin-left: 39%;
					width: 121px;

					.input-style-two {
						color: #58585a;
						font-size: 30rpx;
						font-family: PingFang_Bold;
					}
				}

				.input-title-two {
					color: #F64444;
					font-size: 36rpx;
					font-family: PingFang_Bold;
				}
			}

			.tips-content {
				margin: 40rpx 0;
				padding: 0 15px;
				color: #F64444;
				font-size: 26rpx;
				font-family: PingFang_Bold;

				.tips {
					// margin-bottom: 10rpx;
					line-height: 42rpx;
				}

				.tips-one {
					margin-top: 20rpx;
					line-height: 42rpx;
					color: #CB8F58;
					font-size: 28rpx;
					font-family: PingFang_Bold;
				}
			}

			.confirm-button {
				background-color: #F71D1F50;
				margin: 40px 15px 0 15px;
				padding: 24rpx 0;
				text-align: center;
				font-size: 32rpx;
				border-radius: 8px;
				font-family: PingFang_Bold;
				color: #FFFFFF;
				// cursor: pointer;
			}
		}

		.action-sell-out {
			margin-top: 100rpx;
			text-align: center;

			.sell-out {
				width: 65vw;
				height: 50vw;
			}

			.sell-out-text {
				margin-top: 40rpx;
				color: #aaaaaa;
				font-size: 34rpx;
				font-weight: 600;
			}
		}
	}
</style>
